<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/31 0031
  Time: 16:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Layout布局</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
</head>
<%--导入css和js--%>
<script type="text/javascript">
    var index = 1;
    function addTab() {
        $('#tt').tabs('add',{
            title: '收单列表'+index,
            content: '<div >Content'+index+'</div>',
            closable: true
        });
        index++;
    }
</script>
<script>

    var setting = {
        data: {
            simpleData: {
                enable: true//使用简单树形json数据
            }
        },
        callback:{
            onClick:function (event, treeId, terrNode, clickFlag) {
                console.log("event:"+ event)
                console.log("treeId:"+ treeId)
                console.log("terrNode:"+ terrNode)
                console.log("clickFlag:"+ clickFlag)
                if (!terrNode.isParent) {
                    var tab = $("#tt").tabs("exists", terrNode.name);
                    if (tab){
                        $("#tt").tabs("select", terrNode.name);
                    } else {
                        $('#tt').tabs('add',{
                            title: terrNode.name,
                            content: '<div >Content'+terrNode.name+'</div>',
                            closable: true
                        });
                    }
                }
            }
        }
    };

    $(document).ready(function(){
        //获取菜单数据
        //发送请求
        var url = "${pageContext.request.contextPath}/json/menu.json";
        $.get(url ,
            function (data) {
                $.fn.zTree.init($("#treeDemo"), setting, data);
            }
        )

    });
</script>
<body >
<div class="easyui-layout" style="height:100%;width: 100%">
    <div data-options="region:'north'" style="height:50px">A</div>
    <div data-options="region:'south',split:true" style="height:50px;">B</div>
    <div data-options="region:'east',split:true" title="East" style="width:180px;">C</div>
    <div data-options="region:'west',split:true" title="West" style="width:200px;">
        <div class="easyui-accordion"  data-options="fit:true">
            <div title="面板一">
                <a href="javascript:void (0)"  onclick="addTab()">收单列表</a>
            </div>
            <div title="面板二">

                <ul id="treeDemo" class="ztree"></ul>
            </div>
            <div title="面板二">3</div>
        </div>
    </div>
    <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
        <div id="tt" class="easyui-tabs" data-options="fit:true">
            <!--  closable:true：表示显示关闭按钮 -->
            <div title="工作台">工作台</div>
            <div title="快递列表" data-options="closable:true">快递列表</div>
            <div title="快递列表">快递列表</div>
        </div>
    </div>
</div>
</body>
</html>
